<template>
  <div class="list">
    <!--    标题-->
    <div class="li-title">
      <van-nav-bar left-arrow title="商品列表" @click-left="$router.back()" />
    </div>
    <!--    搜索框-->
    <div class="li-content">
      <van-search
        v-model="searchData"
        placeholder="请输入搜索关键词"
        shape="round"
        show-action
      >
        <template #action>
          <div class="li-btn" style="margin-top: 8px">
            <van-icon name="list-switch" size="28px" />
          </div>
        </template>
      </van-search>
    </div>
    <!--    选择-->
    <van-tabs v-model="sortType" @change="onSearch1">
      <van-tab name="all" title="综合"></van-tab>
      <van-tab name="sales" title="销量"></van-tab>
      <van-tab name="price" title="价格"></van-tab>
    </van-tabs>
    <!--    商品-->
    <div class="li-bottom">
      <div class="bottom-count">
        <goods-list1
          v-for="(item, index) in goodsList1"
          :key="index"
          :item="item"
        ></goods-list1>
      </div>
    </div>
  </div>
</template>
<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import GoodsList1 from '@/components/goodsList1.vue'
import { OnSearch } from '@/api/list'

export default {
  name: 'listCom',
  // import引入的组件需要注入到对象中才能使用",
  components: { GoodsList1 },
  data () {
    // 这里存放数据",
    return {
      searchData: this.$route.query.goods_name,
      goodsList1: [],
      sortType: 'all'
    }
  },
  // 监听属性 类似于data概念",
  computed: {},
  // 方法集合",
  methods: {
    async onSearch () {
      const {
        data: {
          data: {
            list: { data }
          }
        }
      } = await OnSearch(this.sortType, this.$route.query.goods_name)
      this.goodsList1 = data
      console.log(this.goodsList1)
    },
    onSearch1 () {
      this.onSearch()
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
  created () {
    this.onSearch()
  }
}
</script>
<style lang="less">
.list {
  .li-title {
    .van-nav-bar .van-icon {
      color: black;
    }
  }

  .li-content {
  }

  .li-bottom {
    background-color: #fafafa;
    height: 100vh;

    .bottom-count {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }
  }
}
</style>
